<template>
  <div class="focus">
    <div class="search">
      <a-input-search
        v-model:value="value"
        placeholder="请输入内容"
        size="large"
        @search="onSearch"
        style="width: 300px"
      >
        <template #enterButton>
          <a-button>搜索</a-button>
        </template>
      </a-input-search>
      <a-button type="primary" @click="$router.push('/addenter')">添加</a-button>
    </div>
    <!-- 列表 -->
    <div class="tab">
      <a-table
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="data.list"
        bordered
      >
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'">
            <a>{{ text }}</a>
          </template>
          <template v-if="column.dataIndex === 'pic'">
            <img
              :src="'http://localhost:4005' + text"
              alt=""
              style="width: 30px; height: 23px"
            />
          </template>
          <template v-if="column.dataIndex === 'status'">
               <a-radio-button :value="text?'primary':'link'">{{text?'开启':'停用'}}</a-radio-button>
          </template>
          <template v-if="column.dataIndex === 'id'">
               <a-radio-button value="primary" @click="$router.push(`/editenter/${text}`)">编辑</a-radio-button>
               <a-radio-button value="link">删除</a-radio-button>
          </template>
          
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineComponent, reactive, toRefs, ref } from "vue";

import type { TableProps, TableColumnType } from "ant-design-vue";
import { gethome } from "../../api/focus_api";

import dayjs from "dayjs";
//搜索框
const value = ref("");

const onSearch = () => {};
const data = reactive({
  list: [],
  page: 1,
  limit: 10,
  total: 0,
});
//列表接口
// let a = "public/uploads/e9242cd0c70f96299ca70a5e93d2433c1634374414715.jpg";
// console.log(a.replace("public",''));

gethome({ page: data.page, limit: data.limit }).then((res: any) => {
  console.log(res);
  data.list = res.data.data.map((item) => {
    // console.log();
    item.pic = item.pic.replace("public", "");
    item.updatedAt = dayjs(item.updatedAt).format("YYYY-MM-DD hh:mm:ss");
    // item.status = item.status?'开启':'失败'
    return item;
  });
  data.total = res.data.total;
});

interface DataType {
  name: string;
}

//编辑
const edit =() =>{
  
  console.log(111);
  
  
}
const columns: TableColumnType<DataType>[] = [
  {
    title: "标题",
    dataIndex: "name",
  },
  {
    title: "图片",
    dataIndex: "pic",
  },
  {
    title: "更新时间",
    dataIndex: "updatedAt",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "操作",
    dataIndex: "id",
  },
];

const rowSelection: TableProps["rowSelection"] = {
  onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name,
  }),
};
</script>

<style scoped lang="scss">
.focus {
  width: 100%;
  .search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.ant-radio-button-wrapper{
  margin-left: 10px;
}
</style>